<template>
  <div>
    <l-header :sliderShow="false" :backShow="true" :backUrl="'verification'"></l-header>
    <div class="w89">
      <h2 class="title">{{$t('verification.index.5636t6sgi1s0')}}</h2>
      <van-radio-group v-model="checkedID" class="radioList">
        <van-cell-group>
          <van-cell
            center
            v-for="(item, index) in addressList"
            :key="index"
            clickable
          >
            <template #title>
              <div class="custom-title"><span>{{$t('web.CounterAddress.5636y48w99g0')}}</span><p>{{ item['name_'+langSuff] }}{{ item['area_'+langSuff] }}{{ item['content_'+langSuff] }}</p></div>
              <div class="custom-title"><span>{{$t('web.CounterAddress.5636y48w9kc0')}}</span><p>{{ item['mobile_zh'] }}</p></div>
              <div class="custom-title"><span>{{$t('web.CounterAddress.5636y48w9w00')}}</span><p>{{ item.email }}</p></div>
              <div class="custom-title"><span>{{$t('web.CounterAddress.5636y48wa4o0')}}</span><p v-html="item['business_remark_'+langSuff]"></p></div>
            </template>
            <template #right-icon>
              <van-radio :name="item.id" >
                  <template #icon="props">
                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                    </template>
              </van-radio>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-button type="info" block class="next-step"  @click="submit">{{$t('documentType.index.5636jiatocw0')}}</van-button>
    </div>
  </div>
</template>
<script>
import { fff } from "@/assets/less/global.less";
import { scenes } from '@/api/allPage'
export default {
  inject: ['branch','StepsPage','user_fill'],
  data() {
    return {
      addressList: [],
      checkedID: "",
      activeIcon:  require('@/assets/img/icon_gx.png'),
      inactiveIcon: require('@/assets/img/icon_bgx.png'),

    };
  },
  computed:{
    langSuff(){
        return  this.$store.state.langSuff
    },
    user_fill_list(){
        return this.user_fill()
    },
  },
  created(){
    this.scenesList()
  },
  methods: {
    changeCheck(val) {
      this.checkedID = val;
    },
    scenesList(){
      scenes()
      .then(res=>{
          this.addressList = res.data;
      })
    },
    submit(){
      if(!this.checkedID){
        this.$toast(this.$t('web.CounterAddress.56aooxvo8ow0'))
        return false
      }
      this.$routerTo('CounterOrder',{id:this.checkedID})
    }
  },
  watch:{
    user_fill_list:{
        handler(list,old){
            var { sceneId } = list;
            this.checkedID=(sceneId??'')
            this.$forceUpdate();
        },
        immediate:true,
        deep:true
    }
  }
};
</script>
<style lang="less" scoped>
h2.title {
  margin-bottom: 0.3rem;
}
.van-cell {
  padding: 0.2rem 0;
}
.radioList{
  padding-bottom: 0.4rem;
  .van-radio{
    align-items:flex-start;
    padding:0.1rem 0;
    @{deep}.van-radio__icon{
        max-width: 0.28rem;
        display: flex;
        align-items: center;
        img{
            width: 100%;
        }
    }
}
}
.van-cell__title {
  .custom-title {
    font-size: 0.26rem;
    color: #404040;
    display:flex;

    span{
      max-width: 22%;
      display: inline-block;
    }
    p{
      width: 78%;
      display: inline-block;
      white-space: break-spaces;
    }
  }
}
</style>